<template>
	<view>
		<u-tabbar :value="index" activeColor="#188B7E" inactiveColor="#727272" @change="change" :fixed="true"
			:placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" @click="navTo" data-url="/pages/index/index">
				<image class="tab_icon" slot="active-icon" src="/static/images/index_active.png"></image>
				<image class="tab_icon" slot="inactive-icon" src="/static/images/index.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="目标" @click="navTo">
				<image class="tab_icon" slot="active-icon" src="/static/images/aim_active.png"></image>
				<image class="tab_icon" slot="inactive-icon" src="/static/images/aim.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="日记"  @click="navTo">
				<image class="tab_icon" slot="active-icon" src="/static/images/note_active.png"></image>
				<image class="tab_icon" slot="inactive-icon" src="/static/images/note.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的"  @click="navTo">
				<image class="tab_icon" slot="active-icon" src="/static/images/user_active.png"></image>
				<image class="tab_icon" slot="inactive-icon" src="/static/images/user.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",

		props: {
			index: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				menus: [{
						url: '/pages/index/index'
					},
					{
						url: '/pages/aim/index'
					},
					{
						url: '/pages_note/note/index'
					},
					{
						url: '/pages_user/user/index'
					}
				]
			};
		},
		methods: {
			navTo(e) {
				console.log(e)
				uni.reLaunch({
					url: this.menus[e].url
				});
			},
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-tabbar__content {
		background-color: #50D0C2 !important;
	}
	.tab_icon {
		width: 30rpx;
		height:30rpx
	}
</style>